dpot-frontend/app/(main)/watch/[channelSID]/style.scss

.watch-page {
	display: flex;
	height: 100%;
	gap: 0;

	@media (max-width: 768px) {
		flex-direction: column;
	}

	&__content {
		flex: 1;
		min-width: 0;
		overflow-y: auto;
	}

	&__player {
		position: relative;
		width: 100%;
		padding-top: 56.25%; // 16:9
		background: #000;

		iframe {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			border: none;
		}
	}

	&__offline {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 12px;
		color: #999;

		a {
			color: var(--brand-orange);
			text-decoration: underline;
		}
	}

	&__info {
		padding: 16px;
	}

	&__title {
		font-size: 1.125rem;
		font-weight: 600;
		margin-bottom: 8px;
		line-height: 1.3;
	}

	&__channel {
		display: flex;
		align-items: center;
		gap: 8px;
		margin-bottom: 12px;
	}

	&__channel-name {
		font-size: 0.875rem;
		font-weight: 500;
		display: flex;
		align-items: center;
		gap: 4px;

		&:hover {
			text-decoration: underline;
		}
	}

	&__verified {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 16px;
		height: 16px;
		border-radius: 50%;
		background: var(--brand-orange);
		color: #fff;
		font-size: 0.625rem;
	}

	&__handle {
		font-size: 0.75rem;
		color: var(--text-muted);
	}

	&__actions {
		display: flex;
		gap: 8px;
	}

	&__donate-btn {
		display: inline-flex;
		align-items: center;
		gap: 4px;
		padding: 8px 16px;
		border-radius: 20px;
		background: var(--brand-orange);
		color: #fff;
		font-size: 0.875rem;
		font-weight: 500;
		text-decoration: none;
		transition: opacity 0.15s;

		&:hover {
			opacity: 0.9;
		}
	}

	&__chat {
		width: 360px;
		flex-shrink: 0;
		border-left: 1px solid var(--border-default);
		display: flex;
		flex-direction: column;

		@media (max-width: 768px) {
			width: 100%;
			height: 400px;
			border-left: none;
			border-top: 1px solid var(--border-default);
		}
	}
}